<template>
  <view  class="title-box" @click="titleButton">
          <!-- 左边按钮 -->
          <view class="checkbox-box" @click="buttomXz">
            <view class="checkbox-button" v-if="isTrue"></view>
          </view>
          <!--  -->
          <view class="bigBox">
             <view class="box-item">
                 <text class="box-item2">默认</text>
                 <text class="box-item3" @click="jianji">编辑</text>
             </view>
             <view class="textRedact">
               <text class="name">姓名：庄曙光</text>
               <text class="Num">手机号码：18416678977</text>
               <text class="diz">地址：山东省潍坊市奎文区恒大名都</text>
             </view>
          </view>
  </view>
  
  <uni-popup ref="scorePopup" type="bottom">
   <view class="infoPopup">
    <button>按钮</button> 将其设置为默认地址
   </view>
  </uni-popup>
</template>

<script setup>
  import { ref } from 'vue';
  const isTrue=ref(false)
  const scorePopup=ref(null)
  // 点击默认选择
  const buttomXz=()=>{
    isTrue.value = !isTrue.value
     console.log(isTrue.value)
  }
  // 点击编辑弹出抽屉
  const jianji=()=>{
    scorePopup.value.open('bottom')
  }
</script>

<style lang="scss" scoped>
 .infoPopup{
   background-color: #fff;
   padding: 30rpx;
   border-radius: 30rpx 30rpx 0 0;
   overflow: hidden;
 }
 
  .title-box{
    position: relative;
    top: 0;
      background-color: #fff;
      margin: 20px auto;
      width: 366px;
      min-height: 155px;
      padding: 30px 20px;
      border-radius: 16rpx;
        .checkbox-box{
          position: absolute;
          top: 50%;
          left: 10%;
          transform: translate(-50%,-50%);
          width: 40rpx;
          height: 40rpx;
          border: 1px solid  rgba(254, 120, 37, 1);
          border-radius: 50%;
              .checkbox-button{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 30rpx;
                height: 30rpx;
                background-color: rgba(254, 120, 37, 1) ;
                border-radius: 50%;
              }
        }
        .bigBox{
          margin-left: 50px;
          margin-bottom: 4px;
              .box-item{
                display: flex;
                justify-content: space-between;
                .box-item2{
                  width: 60px;
                  height: 20px;
                  opacity: 1;
                  border-radius: 16px;
                  background: rgba(255, 225, 188, 1);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 0px 8px 0px 8px;
                }
                .box-item3{
                  font-size: 12px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  line-height: 20px;
                  color: rgba(254, 120, 37, 1);
                  text-align: left;
                  vertical-align: top;
                }
              }
              
              .textRedact{
                display: flex;
                flex-direction: column;
                  .name{
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 24px;
                    color: rgba(49, 49, 49, 1);
                  }
                  .Num{
                    font-size: 16px;
                    font-weight: 700;
                    letter-spacing: 0px;
                    line-height: 24px;
                    color: rgba(49, 49, 49, 1);
                    text-align: left;
                  }
                  .diz{
                    font-size: 14px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 20px;
                    color: rgba(151, 151, 151, 1);
                    text-align: left;
                  }
              }
        }
    }
</style>